@include('Admin.public.head')
<body>
@include('Admin.public.menu')
<link rel="stylesheet" href="{{ URL::asset('js/admin/layui/css/layui.css') }}"/>
<div class=" admin-content" id="app">
    {{ csrf_field() }}
    <div class="daohang">

    </div>
  {{--添加分类--}}
    <div class="am-popup am-popup-inner" id="my-popup" style="max-height: 550px;">
        <div class="am-popup-hd">
            <h4 class="am-popup-title">轮播图</h4>
            <span data-am-modal-close
                  class="am-close">&times;</span> </div>
        <div class="am-popup-bd">
            <form class="am-form tjlanmu">
                <div class="am-form-group am-cf">
                    <div class="zuo">栏目名称：</div>
                    <div class="you">
                        <input type="text" class="am-input-sm" v-model="banner.banner_title" id="doc-ipt-email-1" placeholder="请输入标题">
                    </div>
                </div>
                <div class="am-form-group am-cf">
                    <div class="zuo">栏目图片(长384*宽158)：</div>
                    <div class="you" style="height: 45px;">
                        <input type="button" value=" 选择文件 " id="test1"><span>@{{  imgName }}</span>
                        <p class="am-form-help">文件格式jpeg jpg png，图片小于5M</p>
                    </div>
                </div>
                <div class="am-form-group am-cf" v-show="banner.banner_img != ''">
                    <div class="zuo"></div>
                    <div class="you" style="height: 45px;">
                        <img style="width: 50px;height: 50px" :src="banner.banner_img" alt="">
                    </div>
                </div>
                <!-- <div class="am-form-group am-cf">
                    <div class="zuo">属于商城</div>
                    <div class="you" style="height: 45px;">
                        <select class="am-input-sm" name="" id="" v-model="category.type">
                            <option value="1">商城</option>
							<option value="2">抢购商城</option>
                            <option v-for="val in categoryList" :value="val.id">@{{ val.name }}</option>
                        </select>
                    </div>
                </div> -->
               
                <!-- <div class="am-form-group am-cf">
                    <div class="zuo">路径设置：</div>
                    <div class="you">
                        <input type="text" class="am-input-sm" v-model="category.src" placeholder="请设置路径" value="">
                    </div>
                </div> -->
                
                <div class="am-form-group am-cf">
                    <div class="you">
                        <p>
                            <button type="button" v-on:click="save()" class="am-btn am-btn-success am-radius">提交</button>
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on">轮播图管理</ul>
            <dl><button type="button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus" v-on:click="empty()" data-am-modal="{target: '#my-popup'}">添加轮播图</button></dl>
            <!--data-am-modal="{target: '#my-popup'}" 弹出层 ID  弹出层 190行 开始  271行结束-->
        </div>
        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped am-table-hover">
                <thead>
                <tr class="am-success">
                    <th class="table-title">栏目名称</th>
                    <th class="table-author am-hide-sm-only">栏目图片</th>
                    <th width="163px" class="table-set">操作</th>
                </tr>
                </thead>

               <tbody v-for="(val,index) in categoryList">
                <tr>
                    <td class="am-hide-sm-only">@{{ val.banner_title }}</td>
                    <td class="am-hide-sm-only"><img style="width: 50px;height: 50px" :src="val.banner_img" alt=""></td>
                    <td>
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary am-round" data-am-modal="{target: '#my-popup'}" v-on:click="edit(val)" title="修改"><span class="am-icon-pencil-square-o" ></span></button>
                                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger am-round" v-on:click="delet(val.id)" title="删除"><span class="am-icon-trash-o"></span></button>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            {{--</div>--}}
           <!-- <ul class="am-pagination am-fr">
                <li class="am-disabled"><a href="#">«</a></li>
                <li class="am-active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
            </ul> -->
            <hr />
        </form>
    </div>
</div>
</div>

<script src="{{ URL::asset('js/admin/amazeui.min.js') }}"></script>
<script src="{{ URL::asset('js/admin/layui/layui.js') }}"></script>
<script>
    layui.use(['form', 'upload'], function(){
        var form = layui.form, upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            // ,url: '/upload?_token='+'{{csrf_token()}}'+'&folder=classify',//上传接口
			 ,url: '/upload?_token='+'{{csrf_token()}}'//上传接口
            ,done: function(res){
                if (res.code) {
                    // app.category.thumb = res.data.thumb
                    // app.imgName = res.data.image
					app.getImg(res.data);
                } else {
                    layer.msg(res.data);
                }
            }
            ,error: function(err){
                //请求异常回调
                layer.msg('格式错误');
            }
        });
    });
</script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            category:{ //添加分类列表
                id:'',
                pid:'',
                thumb:'',
                image:'',
                type:'',
                src:'',
            },
			banner:{
				banner_title:'',
				banner_img:'',
				id:0
			},
			
            categoryList :{},
            imgName:'',
			
        },
        methods: {
            initialize:function(){
                $.post("/admin/system/banner",{'_token':'{{csrf_token()}}',class:'select'},function (res) {
                    if(res.code){
                        app.categoryList = res.data.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
			//编辑
			edit:function (val) {
			    if (val.pid == ""){
			        val.pid = 0;
			    }
			    app.banner = val
			},
			getImg:function( key ){
			    if(key!=""){
			        $.post("/getFile", {'_token': '{{csrf_token()}}',key: key},function (res) {  
						console.log(res);
			            app.banner.banner_img = res;   
			        });
			    }
			},
			//删除
			delet:function (id) {
			    $.post("/admin/system/banner",{'_token':'{{csrf_token()}}',class:'delete',id:id},function (res) {
			        if(res.code){
			            layer.msg(res.data);
			            window.location.href="/admin/system/bannerIndex";
			        } else {
			            layer.msg(res.data);
			        }
			    });
			},
            //添加
            save:function () {
                $.post("/admin/system/banner",{'_token':'{{csrf_token()}}',class:'add',banner:app.banner},function (res) {
                    if(res.code){
                        layer.msg(res.data);
                        window.location.href="/admin/system/bannerIndex";
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            empty:function () {
                app.banner = {
                    banner_title:'',
                    banner_img:'',
                    id:0
                };
            }
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },


    })
</script>

<!--<![endif]-->
</body>
</html>